<ion-view left-buttons="leftButtons"
          cache-view="false"
          class="settings">
  <ion-nav-title translate>SETTINGS.TITLE</ion-nav-title>

  <ion-nav-buttons side="secondary">
    <button class="button button-icon button-clear icon ion-android-more-vertical visible-xs visible-sm" ng-click="showActionsPopover($event)">
    </button>
  </ion-nav-buttons>

  <ion-content >

    <!-- Buttons bar-->
    <div class="padding text-center hidden-xs hidden-sm">
      <button class="button button-raised button-stable ink"
              ng-click="reset()">
        <i class="icon ion-refresh"></i>
        {{'SETTINGS.BTN_RESET' | translate}}
      </button>

      <button class="button button-stable button-small-padding icon ion-android-more-vertical"
              ng-click="showActionsPopover($event)"
              title="{{'COMMON.BTN_OPTIONS' | translate}}">
      </button>
    </div>

    <div class="list item-border-large">

      <div class="item item-toggle dark">
        <div class="input-label">
          {{'COMMON.BTN_RELATIVE_UNIT' | translate}}
        </div>
        <label class="toggle toggle-royal"
               id="helptip-settings-btn-unit-relative">
            <input type="checkbox" ng-model="formData.useRelative">
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
      </div>

      <label class="item item-input item-select">
        <div class="input-label">
          {{'COMMON.LANGUAGE' | translate}}
        </div>
        <select ng-model="formData.locale"
                ng-change="changeLanguage(formData.locale.id)"
                ng-options="l as l.label for l in locales track by l.id">
        </select>
      </label>

      <div class="item item-text-wrap item-toggle dark">
        <div class="input-label">
         {{'SETTINGS.USE_LOCAL_STORAGE' | translate}}
        </div>
        <h4 class="gray" ng-bind-html="'SETTINGS.USE_LOCAL_STORAGE_HELP' | translate">
        </h4>
        <label class="toggle toggle-royal">
          <input type="checkbox" ng-model="formData.useLocalStorage" >
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </div>

      <div class="item item-toggle dark item-text-wrap">
        <div class="input-label" ng-bind-html="'SETTINGS.ENABLE_HELPTIP' | translate">
        </div>
        <label class="toggle toggle-royal">
          <input type="checkbox" ng-model="formData.helptip.enable" >
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </div>

     <!-- <div class="item item-toggle dark item-text-wrap">
        <div class="input-label" ng-bind-html="'SETTINGS.ENABLE_UI_EFFECTS' | translate">
        </div>
        <label class="toggle toggle-royal">
          <input type="checkbox" ng-model="formData.enableUuiEffects" >
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </div>-->
      <!-- Allow extension here -->
      <cs-extension-point name="common"></cs-extension-point>

      <span class="item item-divider">
        {{'SETTINGS.AUTHENTICATION_SETTINGS' | translate}}
      </span>

      <div class="item item-toggle" >
        <div class="input-label" ng-class="{'gray': !formData.useLocalStorage}">
          {{'SETTINGS.REMEMBER_ME' | translate}}
        </div>
        <h4 class="gray text-wrap" ng-bind-html="'SETTINGS.REMEMBER_ME_HELP' | translate"></h4>

        <label class="toggle toggle-royal">
          <input type="checkbox" ng-model="formData.rememberMe" ng-disabled="!formData.useLocalStorage">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </div>

      <div class="item item-input item-select">
        <div class="input-label">
          <span class="input-label" translate>SETTINGS.KEEP_AUTH</span>
          <h4 class="gray text-wrap" ng-bind-html="'SETTINGS.KEEP_AUTH_HELP' | translate"></h4>
        </div>

        <label>
          <select ng-model="formData.keepAuthIdle"
                  ng-options="i as (keepAuthIdleLabels[i].labelKey | translate:keepAuthIdleLabels[i].labelParams ) for i in keepAuthIdles track by i">
          </select>
        </label>
      </div>

      <div class="item item-input hidden-xs hidden-sm" ng-class="{'gray': (!formData.useLocalStorage || !formData.rememberMe)}" ng-if="::$root.device.isDesktop()">
        <div class="input-label">
          <span class="input-label" translate>SETTINGS.KEYRING_FILE</span>
          <h4 class="gray text-wrap" ng-bind-html="'SETTINGS.KEYRING_FILE_HELP' | translate"></h4>
        </div>

        <div class="item-note dark">{{formData.keyringFile}}</div>
      </div>

      <span class="item item-divider" translate>SETTINGS.HISTORY_SETTINGS</span>

      <div class="item item-toggle dark">
        <div class="input-label" translate>SETTINGS.DISPLAY_UD_HISTORY</div>
        <label class="toggle toggle-royal">
          <input type="checkbox" ng-model="formData.showUDHistory" >
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </div>

      <div class="item item-toggle dark hidden-xs hidden-sm">
        <div class="input-label" translate>SETTINGS.TX_HISTORY_AUTO_REFRESH</div>
        <h4 class="gray text-wrap" ng-bind-html="'SETTINGS.TX_HISTORY_AUTO_REFRESH_HELP' | translate"></h4>
        <label class="toggle toggle-royal">
          <input type="checkbox" ng-model="formData.walletHistoryAutoRefresh" >
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </div>

      <!-- Allow extension here -->
      <cs-extension-point name="history"></cs-extension-point>

      <span class="item item-divider" translate>SETTINGS.NETWORK_SETTINGS</span>

      <div class="item ink item-text-wrap" ng-click="changeNode()">
        <div class="input-label">
        {{'SETTINGS.PEER' | translate}}
        </div>

        <!-- node temporary changed -->
        <ng-if ng-if="formData.node.temporary">
          <h4 class="gray text-wrap assertive" >
            <i class="icon ion-alert-circled"></i>
            <span ng-bind-html="'SETTINGS.PEER_CHANGED_TEMPORARY' | translate "></span>
          </h4>
          <div class="item-note assertive text-italic">{{bma.server}}</div>
        </ng-if>

        <div class="item-note dark" ng-if="!formData.node.temporary">{{bma.server}}</div>
      </div>

      <div class="item item-text-wrap item-toggle dark hidden-xs hidden-sm">
        <div class="input-label" ng-bind-html="'SETTINGS.EXPERT_MODE' | translate"></div>
        <h4 class="gray" ng-bind-html="'SETTINGS.EXPERT_MODE_HELP' | translate"></h4>
        <label class="toggle toggle-royal">
          <input type="checkbox" ng-model="formData.expertMode" >
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </div>

      <ion-item class="item-input item-select">
        <div class="input-label">
          <div class="input-label hidden-xs" translate>SETTINGS.BLOCK_VALIDITY_WINDOW</div>
          <div class="input-label visible-xs" translate>SETTINGS.BLOCK_VALIDITY_WINDOW_SHORT</div>
          <h4 class="gray " ng-bind-html="'SETTINGS.BLOCK_VALIDITY_WINDOW_HELP' | translate"></h4>
        </div>
        <label>
          <select ng-model="formData.blockValidityWindow"
                  ng-options="i as (blockValidityWindowLabels[i].labelKey | translate:blockValidityWindowLabels[i].labelParams ) for i in blockValidityWindows track by i">
          </select>
        </label>
      </ion-item>

      <!-- Allow extension here -->
      <cs-extension-point name="network"></cs-extension-point>

      <span class="item item-divider"
            ng-if="$root.config.plugins"
            translate>SETTINGS.PLUGINS_SETTINGS</span>

      <!-- Allow extension here -->
      <cs-extension-point name="plugins"></cs-extension-point>
    </div>
  </ion-content>
</ion-view>
